<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>DOM操作-练习</title>
    <style type="text/css">
      body {
        font-size: 13px;
        line-height: 25px;
      }

      table {
        border-top: 1px solid #333;
        border-left: 1px solid #333;
        width: 300px;
      }

      td {
        border-right: 1px solid #333;
        border-bottom: 1px solid #333;
      }

      .center {
        text-align: center;
      }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script>
      function addRow() {
        var fRow = $("#row3");
        var newRow = $("<tr></tr>"); //创建行节点
        var col1 = $("<td>幸福从天而降</td>"); //创建单元格节点并添加元素
        var col2 = $("<td>&yen;18.50</td>"); //创建单元格节点并添加元素
        col2.css("text-align", "center");
        col1.appendTo(newRow); //把单元格添加到行节点中
        col2.appendTo(newRow);
        fRow.before(newRow); //把行节点添加到表格末尾
      }

      function updateRow() {
        var uRow = $("#row1");
        //标题行设置为字体加粗、文本居中显示，背景颜色为灰色
        uRow.css({
          fontWeight: "bold",
          textAlign: "center",
          backgroundColor: "#cccccc",
        });
      }

      function delRow() {
        var dRow = $("tr"); //访问被删除的行
        if (dRow[2] != null) {
          dRow[2].remove(dRow[2]); //删除行
        }
      }

      function copyRow() {
        var oldRow = $("#row3"); //访问复制的行
        var newRow = oldRow.clone(true); //复制指定的行及子节点,添加true使复制过的还能继续复制
        $("#myTable").append(newRow); //在指定节点的末尾添加行
      }
    </script>
  </head>

  <body>
    <table border="0" cellspacing="0" cellpadding="0" id="myTable">
      <tr id="row1">
        <td>书名</td>
        <td>价格</td>
      </tr>
      <tr id="row2">
        <td>看得见风景的房间</td>
        <td class="center">&yen;30.00</td>
      </tr>
      <tr id="row3">
        <td>60个瞬间</td>
        <td class="center">&yen;32.00</td>
      </tr>
    </table>
    <input name="b1" type="button" value="增加一行" onclick="addRow()" />
    <input name="b2" type="button" value="删除第2行" onclick="delRow()" />
    <input name="b3" type="button" value="修改标题样式" onclick="updateRow()" />
    <input name="b4" type="button" value="复制最后一行" onclick="copyRow()" />
  </body>
</html>
